<template>
  <div>
    <div class="tableAuto">
      <!-- <el-card shadow="hover"> -->
      <div class="tableAuto">
        <el-table :data="tableData" :height="height" style="width:100%" @row-click="rowClick" border stripe
          :header-cell-style="{background:'#EAEBEC'}" :cell-style="statusStyle" v-loading="tableLoading" ref="refTable"
          highlight-current-row @sort-change='sortChange'>
          <el-table-column label="" width="50" align="center">
            <template slot-scope="scope">
              <div>
                <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" :label="$t('common.number')" align="center" width="90">
            <template slot-scope="scope">
              {{table_index(scope.$index+1)}}
            </template>
          </el-table-column>
          <el-table-column prop="recipeName" width="150" show-overflow-tooltip :label="$t('recipe.formula_name')"
            sortable='custom'></el-table-column>
          <el-table-column prop="version" width="90" show-overflow-tooltip :label="$t('common.version')"></el-table-column>
          <el-table-column prop="item" width="160" show-overflow-tooltip :label="$t('recipe.material_code')"
            sortable='custom'></el-table-column>
          <el-table-column prop="itemDescription" show-overflow-tooltip :label="$t('basic.material_description')"></el-table-column>
          <el-table-column prop="itemQty" width="80" show-overflow-tooltip :label="$t('recipe.yield')" sortable='custom'></el-table-column>
          <el-table-column prop="uomId" width="80" show-overflow-tooltip :label="$t('basic.company')" sortable='custom'></el-table-column>
          <el-table-column prop="notes" label="配方描述" sortable='custom'></el-table-column>
          <el-table-column prop="fCreatorTime" width="150" show-overflow-tooltip :label="$t('common.create_time')" sortable='custom'>
            <template slot-scope="scope">
              {{scope.row.fCreatorTime}}
            </template>
          </el-table-column>
          <el-table-column prop="discardTime" width="150" show-overflow-tooltip :label="$t('recipe.abandoned_time')" sortable='custom'>
            <template slot-scope="scope">
              {{scope.row.discardTime}}
            </template>
          </el-table-column>
          <el-table-column prop="approverTime" width="150" show-overflow-tooltip :label="$t('recipe.enabling_time')" sortable='custom'>
            <template slot-scope="scope">
              {{$util.format(scope.row.approverTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="recipeStatus" :label="$t('recipe.state')" width="80" align="center" sortable='custom' fixed="right">
            <template slot-scope="scope">
              <span :class="scope.row.recipeStatus == 2 ? 'bai' : ''">
                {{queryStatus(scope.row.recipeStatus)}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- </el-card> -->
    </div>

  </div>

</template>

<script>
export default {
  data () {
    return {
      radioId: "",
      height: 32 * 6.3,
    }
  },
  props: {
    tableData: Array,
    tableLoading: Boolean,
    pager: Object
  },
  methods: {
    rowClick (row) {
      this.radioId = row.fid;
      let obj = {
        row: row,
        radioId: this.radioId
      }
      this.$emit("handleEdit", obj)
      this.$refs.refTable.setCurrentRow(row);
    },
    sortChange (column) {
      this.$emit('sortChange', column)
    },
    statusStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 12) {
        if (this.tableData[rowIndex].recipeStatus == 1) {
          return 'background:#00CC99'
        } else if (this.tableData[rowIndex].recipeStatus == 3) {
          return 'background:#00FF00'
        } else if (this.tableData[rowIndex].recipeStatus == 2) {
          return 'background:#2E75B5'
        } else if (this.tableData[rowIndex].recipeStatus == 4) {
          return 'background:#5B9BD5'
        } else if (this.tableData[rowIndex].recipeStatus == 5) {
          return 'background:#FFFF00'
        } else if (this.tableData[rowIndex].recipeStatus == 6) {
          return 'background:#F4B183'
        }
      }
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    queryStatus (status) {
      switch (status) {
        case 1:
          return "编辑"
        case 2:
          return this.$t('common.examine')
        case 3:
          return this.$t('common.approval')
        case 4:
          return "启用"
        case 5:
          return this.$t('common.abandoned')
        case 6:
          return "实验"
      }
    },
  }
}
</script>

<style scoped>
.bai {
  color: #fff;
}
</style>